<template>
    <div class="flex flex-col h-screen">
        <!-- 导航 -->
        <div class="top-bar fixed top-0 left-0 w-full h-6 shadow-md flex items-center z-10 bg-white ">
            <div class="top-bar-left ml-1">
                <img src="@/assets/message/avartar.png" alt="" class="w-4 h-4 rounded">
            </div>
            <div class="top-bar-center flex-1 ml-4">
                <img src="@/assets/message/JDlogo.png" alt="" class="w-6 mx-auto">
            </div>
            <div class="top-bar-right flex items-center mr-1.5">
                <div class="search">
                    <img src="@/assets/message/search.png" alt="" class="w-3 h-3 mr-2">
                </div>
                <div class="add">
                    <img src="@/assets/message/add.png" alt="" class="w-3 h-3 mr-1">
                </div>
            </div>
        </div>
        <!-- 主体 -->
        <div class="main  px-2 pt-7 h-full overflow-y-auto pb-5">
            <div class="friends">
                <div class="friends-list flex items-center my-1">
                    <div class="friends-list-l relative">
                        <div
                            class="tips absolute top-[-0.2rem] right-[-0.1rem]  text-white bg-red-700 rounded-full w-2 h-2 flex items-center justify-center">
                            9
                        </div>
                        <img src="@/assets/message/apply.png" alt="" class="w-6 h-6 rounded bg-amber-200">
                    </div>
                    <div class="friends-list-r flex-1 ml-1">
                        <div class="top flex justify-between mb-1">
                            <div class="name text-[0.4rem]">好友申请</div>
                            <div class="time">13:33</div>
                        </div>
                        <div class="content text-gray-600">茫茫人海，相聚便是缘</div>
                    </div>
                </div>
            </div>
            <div class="friends" v-for="(friend, index) in friendStore.friends" :key="index"
                :ref="(el) => (index === friendStore.friends.length - 1 ? (itemRef = el as HTMLElement) : '')">
                <div class="friends-list flex items-center my-1">
                    <div class="friends-list-l relative">
                        <div
                            class="tips absolute top-[-0.2rem] right-[-0.1rem]  text-white bg-red-700 rounded-full w-2 h-2 flex items-center justify-center">
                            {{ friend.tip }}
                        </div>
                        <img :src="friend.imgUrl" alt="" class="w-6 h-6 rounded bg-amber-200">
                    </div>
                    <div class="friends-list-r flex-1 ml-1">
                        <div class="top flex justify-between mb-1">
                            <div class="name text-[0.4rem]">{{ friend.name }}</div>
                            <div class="time text-ellipsis">{{ friend.time }}</div>
                        </div>
                        <div class="content text-gray-600">{{ friend.news }}</div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script setup lang="ts">
import { useFriendStore } from '@/stores/friendStore';
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import { ref, onMounted } from 'vue'
const itemRef = ref<HTMLElement | null>(null)
const friendStore = useFriendStore();
const currentPage = ref(1);

onMounted(async () => {
    await friendStore.getFriendList(1, 8);
});

const handleNextPage = async (setHasMore: (value: boolean) => void) => {
    // 页数+1
    currentPage.value++;
    // 模拟向后端发送请求获取第二页的数据
    const res = await friendStore.getFriendList(currentPage.value, 8);
    // 如果没有更多数据，则设置setHasMore为false
    if (!res.hasMore) {
        setHasMore(false);
    }
};

const { hasMore, setHasMore } = useIntersectionObserver(itemRef, () => {
    // loadmore
    handleNextPage(setHasMore)
})



console.log(friendStore.friends);







</script>

<style lang="less" scoped></style>